<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<div th:replace="common/common::html"></div>
<head>
    <meta charset="UTF-8">
    <title th:text="#{login.title}"></title>

    <script th:inline="javascript">
        $(function () {
            $("#aabb").click(function () {
                message("正在打牌")
            });
            $("#login-submit-id").click(function (event) {
                event.stopPropagation();
                var flag = $("input.form-control").checkDom();
                if(!flag){
                    return;
                }
                $("#login-form-id").submit()

            })

        });//ready
    </script>
    <style>
        body{
            display: flex;
            flex-direction: column;
            width: 100%;
        }

        header{
            flex-basis: 70px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        nav{
            margin-right: 20px;
            display: flex;
            justify-content: space-between;
            width: 100px;
        }

        article{
            flex-grow: 1;
            display: flex;
            align-items: center;
            background-color: #EEF
        }
        article > img{
            flex-grow: 1
        }
        article > form{
            flex-basis: 400px;
            margin-right: 20px;
        }

        article > form > .register-forgot{
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
        }

        #login-submit-id{
            text-align: center;
        }

    </style>


</head>
<body>
<header>
    <img th:if="${session.lang eq 'en'}" th:src="@{/assets/images/logo_en.png}">
    <img th:if="${session.lang eq 'zh'}" th:src="@{/assets/images/logo_zh.png}">
    <nav>
        <a th:href="@{login(lang=en)}" th:text="#{login.lang.en}"></a>

        <a th:href="@{login(lang=zh)}" th:text="#{login.lang.zh}"></a>
    </nav>
</header>
<article>
    <img th:src="@{/assets/images/pic.png}">
    <form id="login-form-id" th:action="@{/login/verification}" method="post">
        <div class="form-group">
            <span th:text="#{login.userName}"></span>
            <input class="form-control" name="username" th:title="#{login.userName.title}" pattern="^.{4,}$">
        </div>

        <div class="form-group">
            <span th:text="#{login.password}"></span>
            <input class="form-control" name="password" type="password"
                   th:title="#{login.password.title}" pattern="^.{6,}">
        </div>

        <a id="login-submit-id"  href="#" class="btn-success form-control" th:text="#{login.submit}"></a>

        <div class="form-group register-forgot">
            <a href="#" th:text="#{login.register}"></a>
            <a href="#" th:text="#{login.forgot}"></a>
        </div>
    </form>
</article>

</body>
</html>